<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select and data</title>
</head>
<body>
    <p>Hello World 1</p>
    <p>Hello World 2</p>
    <div class="box">
        <p>yes</p>
        <p>or</p>
        <p>no</p>
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        let str = 'china';
        d3.select("body").selectAll("p").datum(str).text( (d, i) => {
            return `第${i}个元素绑定的数据是${d}`;
        });
        /*  datum()
        * 在上面的代码中，有一个箭头函数（这个箭头函数也可以使用:function(d,i){}代替），
        * 当选择集组需要使用被绑定的数据时，常需要这么使用。
        * 参数：
        *   d: 代表数据，也就是与元素绑定的数据。
        *   i: 代表索引，代表数据的索引号，从0开始。
        * */
        let dataSet = ['I like js', 'I like python', 'I like c/c++'];
        d3.select('.box').selectAll('p').data(dataSet).text( (d, i) => {
            return d;
        });
        /*  data()
        * 上面的操作：分别将数组的各元素绑定到三个段落元素上。
        * */
    </script>
</body>
</html>